<template>
    <div>
        <el-collapse v-model="activeNames">
            <el-collapse-item :name="item.id" v-for="item, index in permsList" :key="index">
                <template slot="title">
                    <span>{{ item.name }}</span>
                </template>
                <PermsItem :permsInfo="item.permsTrees"></PermsItem>
                <div class="collapseItemBottom">
                    <el-descriptions :column="2" border>
                        <el-descriptions-item label="状态">
                            <el-tag type="success" v-show="item.status == 1">正常</el-tag>
                            <el-tag type="danger" v-show="item.status == 2">禁用</el-tag>
                        </el-descriptions-item>
                        <el-descriptions-item label="创建时间">{{ item.createTime }}</el-descriptions-item>
                    </el-descriptions>
                    <div>
                        <el-button type="warning" size="small" @click="edit(item)">编辑权限</el-button>
                        <el-button type="danger" size="small" @click="changeStatus(item, 2)"
                            v-show="item.status != 2">删除权限</el-button>
                        <el-button type="success" size="small" @click="changeStatus(item, 1)"
                            v-show="item.status != 1">恢复权限</el-button>
                    </div>
                </div>
            </el-collapse-item>
        </el-collapse>
        <el-dialog title="编辑权限" :visible.sync="editDialogVisible" width="30%" :before-close="handleClose">
            <el-form ref="form" :model="editItem" label-width="80px">
                <el-form-item label="权限名称">
                    <el-input v-model="editItem.name"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="save">保 存</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import PermsItem from '../perms-item'
export default {
    name: 'MyCollapse',
    props: ["permsList"],
    components: {
        PermsItem
    },
    data() {
        return {
            // 选中的权限
            activeNames: [],
            // 是否展示编辑窗口
            editDialogVisible: false,
            // 编辑对象
            editItem: {}
        }
    },
    methods: {
        edit(item) {
            this.editItem = item
            this.editDialogVisible = true
        },
        async save() {
            let res = await this.$store.dispatch("updatePermsCategory", {
                id: this.editItem.id,
                permsName: this.editItem.name,
                status: this.editItem.status
            })
            if (res.success) {
                this.$message.success(res.message)
                this.$bus.$emit("refreshPermsData")
            }
            else this.$global.resError(res)
        },
        handleClose(done) {
            done()
            setTimeout(() => {
                this.editItem = {}
            }, 300)
        },
        changeStatus(item, stauts) {
            this.editItem = item
            this.editItem.status = stauts
            this.save()
        }
    }
}
</script>

<style scoped>
.collapseItemBottom {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
</style>